<template>
  <el-table :data="filterTableData" style="width: 100%">
    <el-table-column  label="时间" prop="createTime" />

    <el-table-column label="用户名" prop="username" />
    <el-table-column label="标题" prop="title" />
    <el-table-column label="内容" prop="content" show-overflow-tooltip="true" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          Edit
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>


  <el-dialog v-if="true" v-model="dialogFormVisible" title="编辑文章" width="500">
    <el-form :model="form">
      <el-form-item label="时间:" >
        <el-input disabled v-model="form.createTime" autocomplete="off" />
      </el-form-item>

      <el-form-item label="用户名:" >
        <el-input disabled v-model="form.username" autocomplete="off" />
      </el-form-item>

      <el-form-item label="标题:" >
        <el-input v-model="form.title" autocomplete="off" />
      </el-form-item>

      <el-form-item label="内容:" >
        <el-input v-model="form.content" autocomplete="off" type="textarea" />
      </el-form-item>


    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="upData">
          更新
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script lang="ts" setup>
import {computed, onBeforeMount, reactive, ref} from 'vue'
import axios from "axios";
import {ElMessage} from "element-plus";
import {Timer} from "@element-plus/icons-vue";

interface Article {
  createTime: string
  username: string
  content: string
  title:string
}

const form = reactive({
  createTime:'',
  username: '',
  title:'',
  content: '',

})

const dialogFormVisible = ref(false)



const search = ref('')
const filterTableData = computed(() =>
    tableData.filter(
        (data) =>
            !search.value ||
            data.username.toLowerCase().includes(search.value.toLowerCase())
    )
)
const handleEdit = (index: number, row: Article) => {
  console.log(index, row)
  console.log(index, row)
  dialogFormVisible.value = true
  form.username = row.username
  form.createTime =row.createTime
  form.content = row.content
  form.title= row.title
}
const handleDelete = (index: number, row: Article) => {
  console.log(row.username)
  axios.post("http://localhost:8090/deleteArticle/"+row.username+"").then((response) => {
    console.log(response.data)
    if (response.data == "delete") {
      ElMessage.success("delete")
    }

  })
}




const tableData = reactive<Article[]>([]);



const upData = () => {


  ElMessage.success(form.username)
  axios.get("http://localhost:8090/updateUserInfo/"+form.username+"/"+"/"+form.username).then((response) => {
    console.log(response.data)

  })

  dialogFormVisible.value = true
  // router.push("/alltheinfo")

}

onBeforeMount(()=>{
  axios.get("http://localhost:8090/getAllArticle").then((res) => {
    const res2 = res.data;
    // res = res.data
    console.log(res)
    console.log(res.data.length)

    for(var i=0; i<res.data.length; i++){

      console.log(i);
      tableData.push(res2[i])

    }


    // tableData.push() // 直接将后端数据赋值给tableData



    // res.forEach((item,index) => {
    //
    //   // console.log(item)
    //   // console.log(index)
    //   // tableDataItem.username=item.username
    //   // tableDataItem.title=item.title
    //   // tableDataItem.content=item.content
    //   // tableDataItem.create_time=item.createTime
    //   //
    //   // console.log(tableDataItem)
    //   // tableData.push(tableDataItem)
    //
    //   tableData[index].username=item.username
    //   tableData[index].create_time=item.createTime
    //   tableData[index].title=item.title
    //   tableData[index].content=item.content
    //
    //
    //
    // })

  })

})



</script>